<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 汉中旅游</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="login-page">
    <div class="login-container">
        <div class="login-form-wrapper">
            <div class="login-logo">
                <img src="img/attractions/logo.jpg" alt="汉中旅游">
                <h2>汉中旅游</h2>
            </div>
            <form id="login-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required>
                </div>
                <div class="form-group remember-me">
                    <input type="checkbox" id="remember" name="remember">
                    <label for="remember" class="inline-label">记住我</label>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn login-btn">登录</button>
                </div>
                <div id="message-area" class="message-area"></div>
                <div class="login-links">
                    <a href="#" class="forgot-password">忘记密码?</a>
                    <a href="register.html">注册</a>
                </div>
            </form>
            <div class="login-footer">
                <p>没有账号? <a href="register.html">立即注册</a></p>
                <p><a href="index.html">返回首页</a></p>
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('login-form').addEventListener('submit', async function(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const messageArea = document.getElementById('message-area');
            const submitButton = this.querySelector('button[type="submit"]');

            messageArea.textContent = '';
            messageArea.className = 'message-area';
            submitButton.disabled = true;
            submitButton.textContent = '登录中...';

            try {
                const response = await fetch('/api/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password }),
                });

                if (response.ok) {
                    const data = await response.json();
                    localStorage.setItem('jwt_token', data.token);
                    messageArea.textContent = '登录成功！正在跳转...';
                    messageArea.classList.add('success');
                    setTimeout(() => {
                        window.location.href = 'index.html';
                    }, 1500);
                } else {
                    messageArea.textContent = '登录失败: 用户名或密码错误。';
                    messageArea.classList.add('error');
                    submitButton.disabled = false;
                    submitButton.textContent = '登录';
                }
            } catch (error) {
                console.error('登录请求失败:', error);
                messageArea.textContent = '登录请求失败，请检查网络或联系管理员。';
                messageArea.classList.add('error');
                submitButton.disabled = false;
                submitButton.textContent = '登录';
            }
        });
    </script>
</body>
</html>
